<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
</head>
<body>
    <h2>登录</h2>
    <form id="loginForm">
        <label for="username">用户名:</label><br>
        <input type="text" id="username" name="1"  required><br><br>
        <label for="password">密码:</label><br>
        <input type="password" id="password" name="1"  required><br><br>
        <input type="submit" value="登录">
    </form>

    <p id="message"></p>

    <script>
        // 处理表单提交
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取输入的用户名和密码
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 发送 POST 请求到后端
            fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
            })
            .then(response => response.json())
            .then(data => {
                // 显示后端返回的消息
                const message = document.getElementById('message');
                message.textContent = data.message;
                message.style.color = data.status === 'success' ? 'green' : 'red';
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>